<!DOCTYPE HTML>
<html>
    <head>
        <title>Computer</title>
        <link  type="text/css" rel="stylesheet" href="css.css"/>
        <script src="jquery-1.4.4.min.js"></script>
        <script type="text/javascript">
        var now = 100;
        var boxes;
        var boxHtml;
        
        var addBoxCode = 200;
        var delBoxCode = 300;
        var numbOfCommands = 4;
        
        var boxTop = 160;
        var boxLeft = 20;
        var addPx = 100;
            
        
            $('document').ready(function() {
                PUSHConnect();
            })
            
            function PUSHConnect() {                
                $.ajax({
                    url: 'update.php',
                    type: 'GET',            
                    success: getData
                });
            }
            
            function getData(e) {
                var jData = JSON.parse(e);                
                var boxItems = jData.boxCommands.length;
                
                for(i=0; i<boxItems; i++) {
                    var user = jData.boxCommands[i].userid;
                    var cmd = jData.boxCommands[i].command;
                    
                    if(cmd==addBoxCode) {
                        addBox(user);
                    }
                    
                    if(cmd==delBoxCode) {
                        removeBox(user);
                    }
                    
                    if(cmd <= 4 && cmd > 0) {
                        moveBox(cmd, user);
                    } 
                    
                }
                PUSHConnect();
            }
            
            function addBox(userid) {
                var colorCode = Math.round(Math.random() * 10000000);
                var color = "#" + colorCode.toString(16);
                var html = "<div id='" + userid + "' class='square'>User: " + userid + "<br/>Position: <span></span> </div>";
                $(html).appendTo('#boxArea');
                $('#'+userid).css({backgroundColor: color});
            }
            
            function removeBox(userid) {
                $('#'+userid).remove();
            }
            
            
            function moveBox(move, userid) {
                //1 up, 2 left, 3 down, 4 right
                var boxMove;
                var id = '#' + userid;
                var positionTop = $(id).css("top");
                var positionLeft = $(id).css("left");
                var points = parseInt($(id + 'span').html());
                
                positionTop = positionTop.replace("px", "");
                positionTop = parseInt(positionTop);
                positionLeft = positionLeft.replace("px", "");
                positionLeft = parseInt(positionLeft);
                
                if(move == 1) {
                    boxTop = positionTop - addPx;
                    writePos(id, boxTop, positionLeft);
                    boxMove = boxTop + "px";
                    $(id).animate({top: boxMove}, "fast");
                } 
                
                if(move == 2) {
                    boxLeft = positionLeft - addPx;
                    writePos(id, positionTop, boxLeft);
                    boxMove = boxLeft + "px";
                    $(id).animate({left: boxMove}, "fast");
                } 
                
                if(move == 3) {
                    boxTop = positionTop + addPx;
                    writePos(id, boxTop, positionLeft);
                    boxMove = boxTop + "px";
                    $(id).animate({top: boxMove}, "fast");
                } 
                
                if(move == 4) {
                    boxLeft = positionLeft + addPx;
                    writePos(id, positionTop, boxLeft);
                    boxMove = boxLeft + "px";
                    $(id).animate({left: boxMove}, "fast");
                }
            }
            
            function writePos(id, top, left) {
                $(id + ' span').html('Top: ' + top + '<br/>Left: ' + left);
            }
        </script>
    </head>
    <body>
        <div id="top">
            <span>:::::The box game v0.3:::</span>
        </div>
        <div id="boxArea">
        </div>
    </body>
</html>